<!-- 主页面-首页 -->
<script setup>
import { reactive, computed } from 'vue'
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import { getBannerListApi } from '@/api/shop.js'
// 数据
const info = reactive({
  userId: '',
  barHeight: 0,
  navHeight: 0,
  tabsIndex: 0,
  scrollTo: 0,
  couponShow: false,
  recoveryshow: false,
  tabs: []
})
// 获取手机状态栏高度
onLoad(() => {
  //获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
  let { statusBarHeight } = uni.getSystemInfoSync()
  info.barHeight = statusBarHeight
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  info.navHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2
})
// 页面显示
onShow(() => {
  info.userId = uni.getStorageSync('userId');
  getBannerListApi({
    position: '1'
  })
    .then(res => {
      const list = []
      // 重组数据
      res.data.forEach(row => {
        let index = null
        list.forEach((item, i) => {
          if (item.title === row.title) {
            index = i
          }
        })
        if (index === null) {
          list.push({
            title: row.title,
            sort: row.sort,
            url: row.url,
            list: [row]
          })
        } else {
          list[index].list.push(row)
        }
      })
      list.sort((a, b) => a.sort - b.sort)
      list.forEach(item => {
        item.list.sort((a, b) => a.id - b.id)
      })
      info.tabs = list
    })
})
// 校验是否用户已登录
const checkLogin = () => {
  if (info.userId === '') {
    goLoginPage()
    return false
  }
}
// 前往登录页面
function goLoginPage() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}
// 页面滚动监听
onPageScroll(res => {
  // console.log(res)
  info.scrollTo = res.scrollTop
})
const productInfo = computed(() => {
  return info.tabs[info.tabsIndex] || {}
})
// tabs切换
const tabsChange = (index) => {
  info.tabsIndex = index
  // 滚动到顶部
  scrollToTop()
}
// 滚动到顶部
function scrollToTop() {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  });
}

// 打开 优惠券弹窗
function openCoupon() {
  info.couponShow = true;
  uni.hideTabBar({
    animation: true
  })
}
// 关闭 优惠券弹窗
function downCoupon() {
  info.couponShow = false;
  uni.showTabBar({
    animation: true
  })
}
// 打开 回收弹窗
function openRecovery() {
  info.recoveryshow = true;
  uni.hideTabBar({
    animation: true
  })
}
// 关闭 回收弹窗
function downRecovery() {
  info.recoveryshow = false;
  uni.showTabBar({
    animation: true
  })
}
// 前往商品详情
function goDetail() {
  checkLogin()
  const url = productInfo.value.url
  uni.navigateTo({
    url
  })
}
</script>

<template>
  <view class="home-page">
    <!-- 导航栏 -->
    <view class="navber" :style="{ 'padding-top': info.barHeight + 'px' }">
      <!-- 标题栏 -->
      <view class="title" :style="{ 'height': info.navHeight + 'px' }"><text>QIAN DAO JI</text></view>
      <!-- 标签栏 -->
      <view class="tabs-box">
        <view class="tabs-item" v-for="(item, i) in info.tabs" :key="item.sort" :class="{ active: i == info.tabsIndex }"
          @click="tabsChange(i)">
          <text>{{ item.title }}</text>
        </view>
      </view>
    </view>
    <!-- 内容区域 -->
    <view class="content-box" :style="{ marginTop: info.barHeight + info.navHeight + 'px' }">
      <up-lazy-load v-for="(item, index) in productInfo.list" :key="index" :image="item.picUrl"></up-lazy-load>
    </view>
    <!-- 按钮 -->
    <view class="control-box">
      <view v-if="info.scrollTo > 100" class="backTop">
        <image src="/static/images/icons/back_top.png" mode="widthFit" style="width:30rpx; height: 30rpx;"
          @click="scrollToTop" />
      </view>
      <view v-if="productInfo.url && productInfo.url !== ' '" class="btn" @click="goDetail">
        立即抢购
      </view>
    </view>
    <!-- 优惠券弹窗 -->
    <up-overlay :show="info.couponShow" @click="show = false">
      <view class="coupon-warp">
        <view class="coupon-box" @tap.stop>
          <image class="bg" src="/static/images/coupon_overlay_bg.png" mode="scaleToFill" />
          <view class="tip">
            <text>恭喜您，获得</text>
            <text class="num">2张</text>
            <text>优惠券</text>
          </view>
          <view class="coupon-info">
            <text>X2</text>
            <text>优惠券</text>
          </view>
          <image src="/static/images/icons/down.png" class="close-btn" style="width: 70rpx; height: 70rpx;"
            mode="scaleToFill" @click="downCoupon" />
        </view>
      </view>
    </up-overlay>
    <!-- 回收弹窗 -->
    <up-overlay :show="info.recoveryshow" @click="show = false">
      <view class="recovery-warp">
        <view class="recovery-box" @tap.stop>
          <view class="content-box">
            <image src="https://cdn.uviewui.com/uview/swiper/swiper1.png" mode="widthFit" />
            <text
              class="up-line-2 info">这是通知标题这是通知标题这是通知标题这是这是通知标题这是通知标题这是通知标题这是这是通知标题这是通知标题这是通知标题这是这是通知标题这是通知标题这是通知标题这是这是通知标题这是通知标题这是通知标题这是</text>
            <view class="btn">
              前往查看
            </view>
          </view>
          <image src="/static/images/icons/down.png" class="close-btn" style="width: 70rpx; height: 70rpx;"
            mode="scaleToFill" @click="downRecovery" />
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<style lang="scss" scoped>
.home-page {

  // 导航栏
  &>.navber {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100vw;
    background: linear-gradient(180deg, #272626 0%, #0D0D0D 100%);

    // 标题栏
    & .title {
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 36rpx;
      color: #FFFFFF;
    }

    // 标签栏
    & .tabs-box {
      display: flex;
      align-items: center;
      height: 80rpx;

      & .tabs-item {
        position: relative;
        margin: 0 20rpx;
        font-weight: 300;
        font-size: 28rpx;
        color: #FFFFFF;

        &.active {
          color: #FFC870;
          font-size: 30rpx;

          &::after {
            content: '';
            position: absolute;
            bottom: -18rpx;
            left: 0;
            right: 0;
            margin: auto;
            width: 30rpx;
            height: 18rpx;
            background-image: url('/static/images/icons/tab_select.png');
          }
        }
      }
    }
  }

  // 内容区域
  &>.content-box {
    padding-top: 80rpx;
  }

  // 控制区域
  &>.control-box {
    position: fixed;
    bottom: 44rpx;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;

    & .backTop {}

    & .btn {
      margin: auto;
      margin-top: 48rpx;
      width: 438rpx;
      height: 104rpx;
      line-height: 104rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12rpx;
      border: 2rpx solid #FFFFFF;
      font-weight: 600;
      font-size: 44rpx;
      color: #FFFFFF;
      backdrop-filter: blur(5px);
    }

  }

  // 优惠券弹窗
  & .coupon-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    & .coupon-box {
      position: relative;
      width: 608rpx;
      height: 744rpx;
      text-align: center;

      &>.bg {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 608rpx;
        height: 744rpx;
      }

      & .tip {
        margin-top: 190rpx;
        position: relative;
        z-index: 2;
        font-weight: 500;
        font-size: 36rpx;
        color: #9A0C04;

        & .num {
          color: #FC6444;
        }
      }

      & .coupon-info {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 138rpx;
        margin-top: 96rpx;
        font-weight: 500;
        font-size: 50rpx;
        color: #FFFFFF;
      }

      & .close-btn {
        position: absolute;
        z-index: 2;
        bottom: 30rpx;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }

  // 回收弹窗
  & .recovery-warp {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    & .recovery-box {
      text-align: center;

      & .content-box {
        width: 576rpx;
        background: #FFFFFF;
        overflow: hidden;
        border-radius: 10rpx;

        & image {
          width: 576rpx;
        }

        & .info {

          margin: 20rpx;

          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }

        & .btn {
          margin: 0 20rpx;
          margin-top: 40rpx;
          margin-bottom: 60rpx;
          height: 76rpx;
          line-height: 76rpx;
          background: #FFC870;
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
      }

      & .close-btn {
        margin-top: 40rpx;
      }
    }
  }
}
</style>